<template>
  <div class="category">
    <div class="wrapper">
      <ul class="content">
        <li>分类列表1</li>
        <li>分类列表2</li>
        <li>分类列表3</li>
        <li>分类列表4</li>
        <li>分类列表5</li>
        <li>分类列表6</li>
        <li>分类列表7</li>
        <li>分类列表8</li>
        <li>分类列表9</li>
        <li>分类列表10</li>
        <li>分类列表11</li>
        <li>分类列表12</li>
        <li>分类列表13</li>
        <li>分类列表14</li>
        <li>分类列表15</li>
        <li>分类列表16</li>
        <li>分类列表17</li>
        <li>分类列表18</li>
        <li>分类列表19</li>
        <li>分类列表20</li>
      </ul>
    </div>
    <ul>
      <li>李继远是傻逼</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
      <li>消息</li>
    </ul>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import {test} from 'network/category'

  export default {
    name: "Category",
    data() {
      return {
        BScroll: null,
      }
    },
    mounted() {

      this.BScroll = new BScroll(document.querySelector(".wrapper"), {
        probeType: 3,
        pullUpLoad: true
      })

      this.BScroll.on("scroll", (position) => {
        /*console.log(position);*/
      })

      this.BScroll.on("pullingUp", () => {
        console.log("上拉加载更多");

        setTimeout(() => {
          this.BScroll.finishPullUp();
        }, 2000)
      })
    }
  }
</script>

<style scoped>
  .wrapper {
    height: 300px;
    background: #ff62e7;
    overflow: hidden;
  }

  .category {
    font-size: 16px;
  }
</style>
